<template>
  <div class="Message" :class="props.title === '我关注的' || props.title === '我的粉丝' ? 'Message1' : 'Message'">
    <!-- 头部 -->
    <Async_header_part :xiao="xiao" :title="props.title" @goback="goback" />
    <div style="width: 100%;height: 44px;"></div>
    <!-- 内容 -->
    <div :class="props.title === '我关注的' || props.title === '我的粉丝' ? 'nr1' : 'nr'" v-for="item, index in props.Arr"
      :key="index">
      <!-- 头像 -->
      <img :src="'http://43.138.15.137:3000' + item.userAvatar" alt="" class="actver" @error="userAvatarError">
      <!-- 内容1 -->
      <div :class="props.title === '我关注的' && props.title === '我的粉丝' ? 'neirong1' : 'neirong'">
        <p>
          <span v-show="props.title === '@我的' || props.title === '评论'">@</span>
          {{ item.userNickname }}
        </p>
        <p v-show="props.title === '粉丝'">关注了你</p>
        <p v-show="props.title === '赞'">赞了你的评论</p>
        <p v-show="props.title === '@我的' || props.title === '评论'">{{ item.commentContent }}</p>
        <p v-show="props.title === '我关注的' || props.title === '我的粉丝'" class="desc">{{
    item.userDesc }}</p>
        <p class="shijian" v-show="props.title !== '我关注的' && props.title !== '我的粉丝'">
          <span v-show="props.title === '@我的'">提到了你</span>
          <span v-show="props.title === '评论'">评论了你的评论</span>
          {{
    formatTimestamp(item.createdAt) }}
        </p>
      </div>
      <!-- 关注按钮 -->
      <!-- 粉丝页面:互相关注1、关注0 -->
      <div v-show="props.title === '粉丝' || props.title === '我的粉丝'">
        <div class="gz" v-show="item.bothStatus === 1" @click="gz(item.userId)">
          互相关注</div>
        <div class="gz1" v-show="item.bothStatus === 0" @click="gz(item.userId)">关注</div>
      </div>
      <!-- 我关注的页面:互相关注1、关注(点击互相关注或已关注都变为关注)、已关注0 -->
      <div v-show="props.title === '我关注的'">
        <div class="gz" v-show="item.bothStatus === 1 && !item.gzfalg" @click="gz(item.userId)">互相关注</div>
        <div class="gz1" v-show="item.gzfalg" @click="gz(item.userId)">关注</div>
        <div class="gz" v-show="item.bothStatus === 0 && !item.gzfalg" @click="gz(item.userId)">已关注</div>
      </div>
      <!-- 原点 -->
      <div class="dian" v-show="!item.isRead && props.title !== '我关注的'"></div>
      <!-- 评论 -->
      <p v-show="props.title === '赞'">{{ item.commentContent }}</p>
      <!-- 照片 -->
      <img :src="item.videoCover" alt="" class="MessageAt" v-show="props.title === '@我的' || props.title === '评论'">
    </div>
    <p class="test" v-show="props.title === '我的粉丝' || props.title === '我关注的'">暂时没有更多了</p>
  </div>
</template>

<script setup>
import { defineAsyncComponent, ref } from 'vue'
const props = defineProps({
  // 数组
  Arr: {
    type: Array
  },
  title: {
    type: String
  }
})
// 爱心
const Async_header_part = defineAsyncComponent(() => import('./header-part.vue'))
const xiao = ref(true)
const emit = defineEmits(['gz'])
// 编码改为年月日
function formatTimestamp(timestamp) {
  let date = new Date(timestamp); // Multiply by 1000 to convert seconds to milliseconds
  let year = JSON.stringify(date).split('-')[0].split('"')
  // console.log(year);
  let monthNames = [
    "1-", "2-", "3-", "4-", "5-", "6-",
    "7-", "8-", "9-", "10-", "11-", "12-"
  ];
  let month = monthNames[date.getMonth()];
  let day = date.getDate() >= 10 ? date.getDate() : "0" + date.getDate();
  return year[1] + '-' + month + day
}
// 关注
const gz = (params) => {
  emit('gz', params)
}
// 返回
async function goback() {
  window.history.go(-1)
}
// 头像错误值处理
function userAvatarError(event) {
  // console.log(event.srcElement);
  let img = event.srcElement
  img.src = 'src/assets/avatar/default.png'
  // 防止当原图链接和默认图片链接都失效时，会再次调用失败的方法，就出现了无限循环（闪图）的问题
  img.onerror = null
}
</script>

<style lang="scss" scoped>
.Message,
.Message1 {
  width: 100%;
  height: 100%;
  background-color: #000;
}

.desc {
  color: #8b8c96;
  font-size: 12px;
}

.shijian {
  color: #8b8c96;
  font-size: 12px;
}

.Message1 {
  background: #161622;
}

.MessageAt {
  width: 60px;
  height: 60px;
}

.top {
  width: 100%;
  height: 44px;
  color: #fff;
  font-size: 16px;
  text-align: center;
  line-height: 44px;

  span {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 24px;
    margin-left: 10px;
  }
}

.test {
  text-align: center;
  font-size: 12px;
  color: #65676e;
  padding-top: 12px;
}

.nr,
.nr1 {
  position: relative;
  width: 100%;
  height: 80px;
  background: #1c1f2a;
  font-size: 14px;
  color: #e8e8e9;
  display: flex;
  align-items: center;
  justify-content: center;

  .actver {
    width: 45px;
    height: 45px;
  }

  .neirong,
  .neirong1 {
    width: 240px;
    height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-left: 10px;
    font-size: 16px;
  }

  .neirong1 {
    justify-content: space-evenly !important;
  }

  .gz,
  .gz1 {
    width: 70px;
    height: 25px;
    background: #383b44;
    line-height: 25px;
    text-align: center;
    font-size: 12px;
  }

  .gz1 {
    background: #f8355f;
  }

  .dian {
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -4px;
    background: #face15;
    border-radius: 50%;
    width: 8px;
    height: 8px;
  }
}

.nr1 {
  height: 65px;
  background: #161622;
}
</style>